<template>
  <a-modal
    :title="'新增 '+addTitle+' 固件'"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          style="display: none"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input v-decorator="['stationId']"/>
        </a-form-item>

        <a-form-item
          label="所属网关"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-select
            :showSearch="true"
            optionFilterProp="children"
            mode="multiple"
            style="width: 100%"
            placeholder="请选择所属网关"
            v-decorator="['gatewayIds', {rules: [{ required: true, message: '请选择所属网关' }]}]" >
            <a-select-option
              v-for="(item,index) in gatewayList"
              :key="index"
              :value="item.id" >{{ item.gatewayName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="固件名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input
            placeholder="请输入固件名称"
            v-decorator="['firmwareName', {rules: [{required: true, message: '请输入固件名称！'}]}]" />
        </a-form-item>
        <a-form-item
          label="版本号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input
            type="number"
            placeholder="请输入版本号"
            v-decorator="['versionNumber', {rules: [{required: true, message: '请输入版本号！'}]}]" />
        </a-form-item>
        <a-form-item
          label="版本名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input
            placeholder="请输入版本名称"
            v-decorator="['versionName', {rules: [{required: true, message: '请输入版本名称！'}]}]" />
        </a-form-item>
        <a-form-item
          label="更新内容"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input
            placeholder="请输入更新内容"
            v-decorator="['updateRemark', {rules: [{required: true, message: '请输入更新内容！'}]}]" />
        </a-form-item>
        <a-form-item
          label="agent文件"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-upload
            name="fileId"
            :customRequest="customRequestAgent"
            list-type="text"
            :show-upload-list="true"
            :file-list="agentFileList"
            :multiple="true"
            @change="changeAgent"
          >
            <a-button>
              上传
            </a-button>
          </a-upload>
        </a-form-item>
        <a-form-item
          label="application文件"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-upload
            name="fileId"
            :customRequest="customRequestApplication"
            list-type="text"
            :show-upload-list="true"
            :file-list="applicationFileList"
            :multiple="true"
            @change="changeApplication"
          >
            <a-button>
              上传
            </a-button>
          </a-upload>
        </a-form-item>
        <a-form-item
          label="数据库文件"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-upload
            name="fileId"
            :customRequest="customRequestAccess"
            list-type="text"
            :show-upload-list="true"
            :file-list="accessFileList"
            :multiple="true"
            @change="changeAccess"
          >
            <a-button>
              上传
            </a-button>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { add } from '@/api/modular/main/gatewayfirmware/gatewayfirmware'
  import { list } from '@/api/modular/main/bizstation/bizStationManage'
  import { gatewayTypelist } from '@/api/modular/main/bizgatewaytype/bizGatewayTypeManage'
  import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
  import { gatewayList } from '@/api/modular/main/bizgateway/bizGatewayManage'
  import { sysFileInfoUpload } from '@/api/modular/system/fileManage'

  export default {
    props:{
      addTitle:{
        type:String,
        default:'',
        required: true,
      }
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visible: false,
        confirmLoading: false,
        stationTree: [],
        gatewayTypeList: [],
        title:'',
        treeLoading: true,
        form: this.$form.createForm(this),
        birthdayString: [],
        gatewayTaskStatusList: [],
        gatewayList: [],
        fileList: [],
        fileIds: [],
        applicationFileList: [],
        applicationFileIds: [],
        agentFileList: [],
        agentFileIds: [],
        accessFileList: [],
        accessFileIds: []
      }
    },
    created () {
      this.getGatewayTaskStatusList()
    },
    mounted(){
    },
    methods: {
      /**
       * 上传文件
       */
       customRequestAgent (data) {
        const formData = new FormData()
        formData.append('file', data.file)
        sysFileInfoUpload(formData).then((res) => {
          if (res.success) {
            this.$message.success('上传成功')
            this.agentFileIds = []
            this.agentFileIds.push(res.data)
            data.onSuccess(res, data.file)
          } else {
            this.$message.error('上传失败：' + res.message)
          }
        })
      },
      changeAgent ({ fileList }) {
        this.agentFileList = []
        this.agentFileList.push(fileList[fileList.length - 1])
      },
      /**
       * 上传文件
       */
       customRequestApplication (data) {
        const formData = new FormData()
        formData.append('file', data.file)
        sysFileInfoUpload(formData).then((res) => {
          if (res.success) {
            this.$message.success('上传成功')
            this.applicationFileIds = []
            this.applicationFileIds.push(res.data)
            data.onSuccess(res, data.file)
          } else {
            this.$message.error('上传失败：' + res.message)
          }
        })
      },
      changeApplication ({ fileList }) {
        this.applicationFileList = []
        this.applicationFileList.push(fileList[fileList.length - 1])
      },
      /**
       * 上传文件
       */
       customRequestAccess (data) {
        const formData = new FormData()
        formData.append('file', data.file)
        sysFileInfoUpload(formData).then((res) => {
          if (res.success) {
            this.$message.success('上传成功')
            this.accessFileIds = []
            this.accessFileIds.push(res.data)
            data.onSuccess(res, data.file)
          } else {
            this.$message.error('上传失败：' + res.message)
          }
        })
      },
      changeAccess ({ fileList }) {
        this.accessFileList = []
        this.accessFileList.push(fileList[fileList.length - 1])
      },
      add (record) {
        const that = this
        that.visible = true
        setTimeout(() => {
          that.form.setFieldsValue({
            stationId: record
          })
        })
        gatewayList({ stationId: record }).then(res => {
          this.gatewayList = res.data
        })
        that.getStationTree()
      },
      getGatewayTaskStatusList () {
        sysDictTypeDropDown({ code: 'gateway_task_status' }).then((res) => {
          if (res.success) {
            this.gatewayTaskStatusList = res.data
          }
        })
      },
      getStationTree () {
        list().then(res => {
          this.treeLoading = false
          if (!res.success) {
            return
          }
          this.stationTree = res.data
        })
        gatewayTypelist().then(res => {
          this.treeLoading = false
          if (!res.success) {
            return
          }
          this.gatewayTypeList = res.data
        })
      },
      handleSubmit () {
        if (this.applicationFileIds.length === 0 || this.agentFileIds.length === 9) {
          this.$message.error('请上传附件')
          return
        }
        const { form: { validateFields } } = this
        validateFields((errors, values) => {
          if (!errors) {
            this.confirmLoading = true
            values.agentFileId = this.agentFileIds[0]
            values.applicationFileId = this.applicationFileIds[0]
            values.accessFileId = this.accessFileIds[0]
            // 默认网关运行状态为在线
            add(values).then((res) => {
              this.confirmLoading = false
              if (res.success) {
                this.$message.success('新增成功')
                this.handleCancel()
                this.$emit('ok', values)
              } else {
                this.$message.info('新增失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      // 退出
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        this.confirmLoading = false
        this.agentFileIds = []
        this.agentFileList = []
        this.applicationFileIds = []
        this.applicationFileList = []
        this.accessFileIds = []
        this.accessFileList = []
      }
    }
  }
</script>
